<template>
	<view class="socgroupalllist">
		<view class="groupactivelist_top_block">
			<uni-search-bar @confirm="search" v-model="params.name" @input="input" @cancel="cancel"
				@clear="clear" cancelButton="auto" clearButton="auto" textColor="#000000" placeholder="请输入车友会名称">
			</uni-search-bar>
		</view>
		<view class="soc_topnum_box mt-15 mb-15">
			<uni-row class="" gutter="30">
				<uni-col :span="8">
					<view class="text-c">
						<view class="f-18 f-w mt-5">{{info.club_number}}</view>
						<view class="f-16 mt-5">车友会数</view>
					</view>
				</uni-col>
				<uni-col :span="8">
					<view class="text-c">
						<view class="f-18 f-w mt-5">{{info.club_huodong_number}}</view>
						<view class="f-16 mt-5">车友会活动数</view>
					</view>
				</uni-col>
				<uni-col :span="8">
					<view class="text-c">
						<view class="f-18 f-w mt-5">{{info.club_user_number}}</view>
						<view class="f-16 mt-5">车友会成员数</view>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view class="group_cell_box">
			<view class="group_cell" v-for="(item,index) in list" :key="index">
				<view @click="goinfo(item.club_id)">
					<image class="group_cell_img" :src="picUrl+item.pic" mode="aspectFill"></image>
					<view class="group_mask_box" v-if="item.pic"></view>
					<view class="group_content_box">
						<view class="group_carmodel">{{item.car_model?item.car_model:'SUBARU'}}</view>
						<view class="group_name">{{item.title}}</view>
						<view class="group_carmodel" style="margin-top: 6rpx;">经销商：{{item.company_title}}</view>
					</view>
				</view>
				<view class="display_flex userinfo_btn">
					<view @click="goinfo(item.club_id)" class="display_flex flex-1">
						<view class="display_flex">
							<image class="group_mask_icon" :src="onlinePic+'group_user_icon.png'"></image>
							<view class="ml-5 c-white f-10">{{item.join_count}} 成员</view>
						</view>
						<view class="display_flex ml-15">
							<image class="group_mask_icon" :src="onlinePic+'group_active_icon.png'"></image>
							<view class="ml-5 c-white f-10">{{item.huodong_count}} 场活动</view>
						</view>
					</view>
					<view class="group_public_btn_mini f-12" @click="gouserinfo(item.club_id)">查看成员</view>
				</view>
			</view>
		</view>
		<view class="page_bottom_loading" style="padding-bottom:50rpx;">{{loadingTitle}}</view>
	</view>
</template>
<script>
	import {
		getSocGroupList,
		getSocGroupAllNum
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				params: {
					page: 1,
					size: 10,
					name:''
				},
				tabsNum: 1,
				list: [],
				info: '',
				loadingTitle: '',
				msg_number: '',
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
				btnbottom: uni.getSystemInfoSync().safeAreaInsets.bottom > 0 ? 20 : 10,
				pdbottom: uni.getSystemInfoSync().safeAreaInsets.bottom ? uni.getSystemInfoSync().safeAreaInsets.bottom +
					130 : 130,
			};
		},
		onShow() {
			if (uni.getStorageSync('userinfo').is_staff == 0) {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		},
		onLoad() {
			if (uni.getStorageSync('userinfo').is_staff != 0) {
				this.getSocGroupList()
				this.getSocGroupAllNum()
			}
			var params = {
				event_code: 'SOC-车友会管理',
				path: 'pages/groupmanage/socgroupalllist',
				event_id: '',
				title: '',
				source_page: '',
				value: '',
			}
			app.BurialPoint(params)
		},
		methods: {
			getSocGroupAllNum() {
				getSocGroupAllNum({}).then(res => {
					if (res.state == 1) {
						this.info = res.data.info
					} else {
						this.loadingTitle = "- 暂无更多 -"
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			getSocGroupList() {
				getSocGroupList(this.params).then(res => {
					if (res.state == 1) {
						this.list = [...this.list, ...res.data.data]
						this.current_page = res.data.current_page
						this.last_page = res.data.last_page
						if (this.list.length == 0) {
							this.loadingTitle = "- 暂无更多 -"
						}
					} else {
						this.loadingTitle = "- 暂无更多 -"
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			search(res) {
				this.params.page = 1
				this.list = []
				this.getSocGroupList()
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) { //清空输入框
				this.params.name = ''
			},
			cancel(res) { //取消搜索，清空输入框
				this.params.name = ''
				this.params.page = 1
				this.list = []
				this.getSocGroupList()
			},
			goinfo(club_id) {
				uni.navigateTo({
					url: '/pages/groupmanage/groupinfo?club_id=' + club_id
				})
			},
			gouserinfo(club_id) {
				uni.navigateTo({
					url: '/pages/groupmanage/socgroupuserlist?club_id=' + club_id
				})
			}

		},
		onPullDownRefresh() {
			this.params.page = 1
			this.list = []
			this.getSocGroupList()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.current_page < this.last_page) {
				this.showLoading = true
				this.params.page = this.params.page + 1
				this.getSocGroupList()
			} else {
				this.showLoading = false
				if (this.list.length > 0) {
					this.loadingTitle = "- 已经到底了 -"
				} else {
					this.loadingTitle = "- 暂无更多 -"
				}

			}
		},
	}
</script>

<style lang="scss">
	.socgroupalllist {
		.groupactivelist_top_block {
			position: sticky;
			top: 0;
			z-index: 10;
			background-color: #ffffff;
		}

		.group_tabs_box {
			padding: 30rpx;
			position: sticky;
			top: 0;
			z-index: 5;
			background-color: #ffffff;

			.join_group_img {
				width: 100%;
				height: 110rpx;
				vertical-align: middle;
			}
		}

		.group_cell_box {
			padding: 0 30rpx;

			.group_cell {
				width: 100%;
				position: relative;
				margin-bottom: 30rpx;

				.group_cell_img {
					width: 100%;
					height: 340rpx;
					vertical-align: middle;
					border-radius: 8rpx;
				}

				.group_mask_box {
					position: absolute;
					top: 0;
					right: 50%;
					bottom: 0;
					left: 0;
					z-index: 1;
					background: linear-gradient(to right, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
					border-top-left-radius: 8rpx;
					border-bottom-left-radius: 8rpx;
				}

				.group_content_box {
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					z-index: 2;
					padding: 50rpx;

					.group_carmodel {
						color: #ffffff;
						font-size: 26rpx;
						letter-spacing: 1rpx;
					}

					.group_carmodel_bottom {
						width: 20rpx;
						height: 4rpx;
						margin-top: 10rpx;
						background-color: #00A0DC;
					}

					.group_name {
						color: #ffffff;
						font-size: 32rpx;
						font-weight: bold;
						margin-top: 5rpx;
						letter-spacing: 1rpx;
					}


				}

				.userinfo_btn {
					position: absolute;
					left: 50rpx;
					right: 50rpx;
					bottom: 50rpx;
					z-index: 3;

					.group_mask_icon {
						width: 25rpx;
						height: 25rpx;
					}

					.group_check {
						width: 114rpx;
						height: 36rpx;
					}
				}
			}
		}
	}
</style>